<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="post">
      <div class="title">{{postinfo.title}}</div>
      <div class="author">
        <el-avatar size="small" :src="postinfo.imgUrl" style="margin-right:5px;"></el-avatar>
        {{postinfo.publisher}}发布于{{postinfo.pubDate}}&nbsp;·&nbsp;浏览：{{postinfo.readCount}}&nbsp;回复：{{comments.length}}
      </div>
      <div class="content">{{postinfo.content}}</div>
      <el-divider></el-divider>
      <div class="star">
        <i class="iconfont icon-dianzan"></i>
        <span>点赞({{postinfo.praiseCount}})</span>
        <i class="el-icon-chat-line-square"></i>
        <span>评论({{postinfo.commentCount}})</span>
      </div>
    </div>
    <div class="commentList">
      <div class="count">共{{comments.length}}条评论</div>
      <div class="comment_con" v-for="item in comments" :key="item._id">
        <el-avatar size="large" fit="fill" :src="item.imgUrl" style="margin-right:5px;"></el-avatar>
        <div class="con">
          <div class="user">{{item.commentator}}&nbsp;回复于&nbsp;{{item.commDate}}</div>
          <div class="content">{{item.content}}</div>
        </div>
        <i class="iconfont icon-dianzan"></i>
        <span>{{item.praiseCount}}</span>
      </div>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import breadcrumb from '../breadcrumb.vue'
export default {
  data() {
    return {
      postId: '', // 帖子的id
      postinfo: '', // 帖子内容
      comments: [] // 所有评论内容
    }
  },
  created() {
    // 得到post的id
    this.postId = this.$route.query.id
    // 得到内容
    this.getappointPost(this.postId)
  },
  methods: {
    // 得到帖子内容
    async getappointPost(id) {
      const postRes = await this.$http.get('/getappointPost/' + id)
      if (postRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      var postData = postRes.data
      // 获取发帖者头像
      await this.comm.getuserImg(postData.publisher).then(data => {
        postData.imgUrl = data
      })
      postData.praiseCount = postData.praisePerson.length
      this.postinfo = postData
      const comRes = await this.$http.get('/getcomment/', {
        params: {
          type: 'show',
          id: id
        }
      })
      if (comRes.meta.status !== 200) {
        return this.$Message.error('获取评论失败')
      }
      // console.log(comRes)
      comRes.data.forEach(async item => {
        await this.comm.getuserImg(item.commentator).then(data => {
          item.imgUrl = data
          item.praiseCount = item.praisePerson.length
        })
        this.comments.push(item)
      })
    }
  },
  components: {
    breadcrumb
  }
}
</script>

<style lang="less" scoped>
.post {
  width: 70%;
  min-height: 200px;
  margin: 15px 0;
  padding: 20px;
  background-color: #fff;
  .title {
    font-size: 28px;
  }
  .author {
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 10px 0;
    font-size: 12px;
    color: #8e94ab;
  }
  .content {
    width: 100%;
    min-height: 70px;
  }
  .star {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    font-size: 14px;
    i {
      font-size: 24px;
      cursor: pointer;
    }
    span {
      margin-right: 20px;
    }
  }
}
.commentList {
  width: 70%;
  padding: 20px 20px;
  margin-bottom: 10px;
  background-color: #fff;
  .count {
    margin-bottom: 10px;
    font-size: 14px;
    color: #8e94ab;
  }
  .comment_con {
    display: flex;
    width: 100%;
    .con {
      margin-top: 10px;
      width: 90%;
      .user {
        font-size: 14px;
        color: #8e94ab;
      }
      .content {
        width: 80%;
        height: 50px;
        margin-top: 10px;
        font-size: 15px;
      }
    }
    i {
      margin: 10px 5px 0 0;
      font-size: 20px;
    }
    span {
      margin: 10px 15px 0 0;
    }
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
